import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-a03',
  templateUrl: './a03.page.html',
  styleUrls: ['./a03.page.scss'],
})
export class A03Page implements OnInit {

  constructor(public navCtrl: NavController) {
  }

  cardHeader: HTMLIonCardHeaderElement;
  cardContent: HTMLIonContentElement;
  card: HTMLIonCardElement;

  ionViewDidLoad() {
    this.cardHeader = <HTMLIonCardHeaderElement>document.getElementById("cardHeader");
    this.cardContent = <HTMLIonContentElement>document.getElementById("cardContent");
    this.card = <HTMLIonCardElement>document.getElementById("card");
  }
  ngOnInit() {
    this.ionViewDidLoad();
  }

  //1、字符串字面量类型【x: 'a' | 'b' | 'c' | 'd'】
  click1() {
    this.card.style.display = "block";
    interface MyOptions {
      a: number;
      b: "ease-in" | "ease-out" | "ease-in-out";
    }
    class MyClass {
      constructor(public opts: MyOptions) { }
    }
    let options: MyOptions = {
      a: 3,
      b: 'ease-in'
    };
    let c = new MyClass(options);
    this.cardHeader.innerHTML = "String literal type";
    this.cardContent.innerHTML = `
        <p>
            a的options属性的值为:<br/>
            x=${c.opts.a},b=${c.opts.b}
        </p>`;
  }

  //2、联合【a | b | c | d】（注意观察和1的区别在哪）
  click2() {
    this.card.style.display = "block";
    this.cardHeader.innerHTML = 'Joint';
    //联合
    interface MyOptions {
      p1: string;
      //p2的类型是：【数组】或者【字符串】或者【函数】
      p2: string[] | string | (() => string);
    }
    let opts: MyOptions = {
      p1: '',
      p2: '',
    };
    opts.p1 = 'hello world'; // OK
    opts.p2 = ['a1', 'a2'];  // OK
    this.cardContent.innerHTML += `<p>
            opts的值为：<br/>
            p1:${opts.p1}<br/>
            p2:${opts.p2[0]},${opts.p2[1]}
        </p>`;
  }

  //交叉【a & b & c & d】（难点）
  click3() {
    this.card.style.display = "block";
    this.cardHeader.innerHTML = 'Cross';
    function MyExt<T, U>(first: T, second: U): T & U {
      let result = <T & U>{};
      for (let id in first) {
        (<any>result)[id] = (<any>first)[id];
      }
      for (let id in second) {
        if (!result.hasOwnProperty(id)) {
          (<any>result)[id] = (<any>second)[id];
        }
      }
      return result;
    }
    class Person {
      constructor(public name: string) { }
    }
    class ConsoleLogger {
      log() {
        console.log('hello!');
      }
    }

    let jim = MyExt(new Person("杰姆"), new ConsoleLogger());
    this.cardContent.innerHTML += `<p>
            jim的name属性值为:${jim.name}<br/>
        </p>`;
  }
}
